<!--
 * @docName: appointmentProcessAdd.vue
 * @Author: mwl
 * @Date: 2023/4/17
 * @LastEditors: zhongxiong
 * @LastEditTime: 17:51
-->
<template>
  <div>
    <div classs="content">
      <div class="class-table">
        <!--//预约日期-->
        <div class="table-wrapper">
          <div class='notes'>
            <span style='color:#2db7f5'><a-tag color="#2db7f5">约</a-tag>已预约数量</span>
            <span style='color:#87d068'><a-tag color="#87d068">余</a-tag>剩余数量</span>
          </div>
          <div class="tabel-container">
            <table align="center">
              <thead>
              <tr>
                <th colspan="1" width="48" class="fw">预约</th>
                <th class="fw" v-for="(item, index) in resultList" :key="index">
                  <p>{{ item.week }}</p>
                  <p class="fonts">{{ item.appointmentDate }}</p>
                </th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td rowspan="1" class="wd amtdstyle">
                  <div class="fw">上午</div>
                </td>
                <template v-for="(item, index) in resultList">
                  <td @click='item.periodVos[0].remainingQuantity>0 ? makeAnAppointmentEvent(item,1) : noMakeAnAppointmentEvent()'>
                    <p><a-tag color="#2db7f5">
                      {{ item.periodVos[0].quantityBooked }}
                    </a-tag></p>
                    <p>
                      <a-tag color="#87d068" v-if='item.periodVos[0].remainingQuantity>0'>
                        {{ item.periodVos[0].remainingQuantity }}
                      </a-tag>
                      <a-tag color="#ddd" v-else>
                        {{ item.periodVos[0].remainingQuantity }}
                      </a-tag>
                    </p>
                  </td>
                </template>
              </tr>
              <tr>
                <td rowspan="1" class="wd pmtdstyle">
                  <div class="fw">下午</div>
                </td>
                <template v-for="(item, index) in resultList">
                  <td @click='item.periodVos[1].remainingQuantity>0 ? makeAnAppointmentEvent(item,2) : noMakeAnAppointmentEvent()'>
                    <p><a-tag color="#2db7f5">
                      {{ item.periodVos[1].quantityBooked }}
                    </a-tag></p>
                    <p>
                      <a-tag color="#87d068" v-if='item.periodVos[1].remainingQuantity>0'>
                      {{ item.periodVos[1].remainingQuantity }}
                      </a-tag>
                      <a-tag color="#ddd" v-else>
                        {{ item.periodVos[1].remainingQuantity }}
                      </a-tag>
                    </p>
                  </td>
                </template>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!--//预约时间段-->
        <div class="table-wrapper">
          <div class='notes' style='margin-top: 10px;'></div>
          <div v-if='!show'>
            <a-card title="办理须知" style="width:100%;margin: auto">
              <div>
                <p>请确保：</p>
                <p style='color: #000;'>1、企业负责人在预约时间前完成“楚税通“APP的下载及注册；</p>
                <p>
                  <img src="../../assets/cstLogo.png" style='width: 100px;'>
                  <span style='margin-left: 10px;font-size: 16px;font-weight: 600;color: #000;'>楚税通</span>
                </p>
                <p style='color: #000;'>2、您在预约时间段保持电话畅通；</p>
                <p style='color: #000;'>谢谢您的合作！</p>
              </div>
            </a-card>
          </div>
          <div class="container" style='position: relative;' v-if='show'>
            <div class="example" v-if='!loading'>
              <a-spin class='qq'/>
            </div>
              <div class='header-top'>
                {{ timeSlotList.week }} {{ timeSlotList.period==1 ? '上午' : timeSlotList.period==2 ? '下午' : ''}}
              </div>
              <div class='flex-box'>
                <template v-if='timeSlotList && timeSlotList.appointmentMainTimeQuantumVos'>
                  <div class="flex-list" v-for="(item, index) in timeSlotList.appointmentMainTimeQuantumVos" :class='{active:index==isactive}' @click='item.status == 1 ? timeEvent(index,item.id): ""'>
                    <span v-if='item.status == 1'>{{item.timeQuantumStart}}-{{item.timeQuantumEnd}}</span>
                    <span v-else-if='item.status == 2'>已约满</span>
                    <span v-else-if='item.status == 3'>不可预约</span>
                  </div>
                </template>
              </div>
          </div>
        </div>
        <!--//按钮-->
        <div class='btn-div' v-if='isactive != null'>
          <p style='color: #000;font-weight: 600;font-size: 16px;'>
            确认当前企业法人是否已完成法人实名采集
            <a-button type="link" @click='goTo()'>查看法人实名采集方法</a-button>
          </p>
          <div style='margin-bottom: 20px'>
            <a-radio-group v-model="taxAuth" @change="collectionEvent">
              <a-radio :value="1">法人已完成实名采集</a-radio>
              <a-radio :value="2">法人未完成实名采集</a-radio>
            </a-radio-group>
          </div>
<!--          //9新增 ，10修改-->
          <a-button v-if='realNameCodeStatus == 10' :disabled='!taxAuth' type="" @click='modifyEvent()' style='margin-right: 20px'>
            修改预约时间
          </a-button>
          <a-button v-else-if='realNameCodeStatus == 9' :disabled='!taxAuth' type="primary" @click='confirmEvent()'>
            确定预约时间
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getAppointmentAvailable,
  getAppointmentConfirm,
  getAppointmentTimeQuantum,
  getUpdateConfirm
} from '@api/appointmentProcess'

export default {
  name:'appointmentProcessAdd',
  data() {
    return {
      taxAuth:null,
      total: 0,
      currentPage: 1,
      act: "0",
      activeIndex: "",
      i: "",
      gradeIndex: "",
      tableData: [],
      resultList:[],
      timeSlotList:[],
      appointmentVosLength:null,
      loading:false,
      show:false,
      isactive:null,
      realNameCodeStatus:null,
      submitData:{
        appointmentMainId: null,
        bizId: null,
        masterId: null,
        masterType: 2
      },
      tipsNo:'预约成功，为保证业务办理时效，请在选择纳税方式前，完成法人实名采集，谢谢！',
      tipsYes:'预约成功，请及时关注业务进度，谢谢！'
    };
  },

  created() {
    if(this.$route.query.realNameCodeStatus){
      this.realNameCodeStatus = this.$route.query.realNameCodeStatus
    }
    this.getAppointmentAvailableFun()
  },

  methods: {
    //跳转
    goTo(){
      this.$router.push({
        path: '/enterprise/taxRealname',
        query: {
        bizId: 1
      }
      })
    },
    //采集勾选事件
    collectionEvent(e){
      this.taxAuth = e.target.value
      console.log(1213,this.taxAuth)
    },
    //预约查询接口
    getAppointmentAvailableFun(){
      let params = {};
      params.businessType = 1013
      getAppointmentAvailable(params).then(res => {
        if (res.success) {
          let data = res.result || [];
          this.resultList = data;
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //预约点击事件
    makeAnAppointmentEvent(item,type){
        let params = {};
        params.appointmentDate = item.appointmentDate;
        params.businessType = 1013;
        params.period = type;
        this.loading = false;
        this.getAppointmentTimeQuantumFun(params)
    },
    //预约时间段点击事件
    timeEvent(index,id){
      this.isactive=index;
      this.submitData.appointmentMainId = id;
      this.submitData.bizId = this.$route.query.bizId;
      this.submitData.masterId = this.$route.query.masterId
    },
    //预约相关接口-可预约时间段
    getAppointmentTimeQuantumFun(params){
      getAppointmentTimeQuantum(params).then(res => {
        if (res.success) {
          this.show = true;
          this.loading =true;
          this.isactive = null;
          this.timeSlotList = res.result || [];
          this.appointmentVosLength = this.timeSlotList.appointmentMainTimeQuantumVos.length;
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //不可预约事件
    noMakeAnAppointmentEvent(){
      this.$message.warning('当前阶段暂不支持预约~')
    },
    //确认预约事件
    confirmEvent(){
      let params = this.submitData;
      params.taxAuth = this.taxAuth;
      getAppointmentConfirm(params).then(res => {
        if (res.success) {
          //传值1 已实名  2 未实名
          if(this.taxAuth == 1){
            this.infoFun(this.tipsYes)
          }else if(this.taxAuth == 2){
            this.infoFun(this.tipsNo)
          }
        }else{
          this.$message.warning(res.message)
        }
      })


    },
    infoFun(tips){
      var that = this;
      this.$info({
        title: tips,
        onOk() {
          that.$router.back();
        },
      });
    },
    //修改预约事件
    modifyEvent(){
      let params = this.submitData;
      params.taxAuth = this.taxAuth;
      getUpdateConfirm(params).then(res => {
        if (res.success) {
          //传值1 已实名  2 未实名
          if(this.taxAuth == 1){
            this.infoFun(this.tipsYes)
          }else if(this.taxAuth == 2){
            this.infoFun(this.tipsNo)
          }
        }else{
          this.$message.warning(res.message)
        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
.btn-div{
  text-align: center;
  padding:30px 0;
}
.header-top {
  height: 80px;
  line-height: 80px;
  width: 100%;
  text-align: center;
  border: 1px solid #f3f3f3;
  font-weight: 600;
  font-size: 16px;
}
.flex-box{
  display: flex;
  flex-wrap:wrap;
  width: 100%;
  box-sizing: border-box;
  border-left: 1px solid #f3f3f3;

}
.flex-list{
  line-height: 80px;
  font-size: 16px;
  text-align: center;
  width: 10%;
  box-sizing: border-box;
  padding: 10px;
  border-bottom: 1px solid #f3f3f3;
}
.active{
  background: #2db7f5;
}
.flex-list:nth-child(2n){
  border-left: 1px solid #f3f3f3;
  border-right: 1px solid #f3f3f3;
}
.flex-list:hover{
  background-color: #2db7f5;
  cursor: pointer;
}
.example{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  .qq{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 30px;
    height: 30px;
  }
}
</style>

<style lang="less" scoped>
.class-table {
  padding: 24px;
  background: #fff;
  .tabel-container {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
}
.wd {
  width: 48px !important;
}
table {
  border: 1px solid #f3f3f3;
  border-collapse: collapse;
  text-align: center;
}
tr,
th,
td {
  width: 150px;
  box-sizing: border-box;
  padding: 10px;
  font-size: 12px;
  text-align: center;
  border: 1px solid #f3f3f3;
}
td:hover {
  background: #e7f7f4;
  cursor:pointer;
}
.wd:hover {
  background-color: #fff;
}
.amtdstyle:hover {
  background-color: #e7f7f4;
}
.pmtdstyle:hover {
  background-color: #fce6bc;
}
.fw {
  font-size: 16px;
  font-weight: 600;
  min-width: 100px;
  padding: 10px;
}
.dis {
  display: none;
}
.fonts {
  font-weight: 400;
  font-size: 14px;
  color: #9899a1;
}
.amstle {
  padding-top: 200px;
  font-size: 16px;
  font-weight: 600;
}
.amtdstyle {
  background: #e7f7f4;
  color: #2e8759;
  border-right: 0;
}
.pmtdstyle {
  background: #fce6bc;
  color: #ff7844;
  border-right: 0;
}
/deep/ .el-button {
  width: 128px;
  height: 38px;
  background: #00c15d;
  border-radius: 8px;
}
.notes{
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  span{
    margin: 0 10px;
  }
}
</style>
